<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import lts from '@/api/lts'
  import { useRouter, useRoute } from 'vue-router'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import appStore from '@/store'
  let showChange = ref(false)
  let userType = ref()
  userType.value = localStorage.getItem('UserType') as string
  const basic = {
    access_config_id: {
      title: '日志接入ID',
      isEdit: false
    },
    access_config_name: {
      title: '日志接入名称',
      isEdit: false
    },
    fleet_id: {
      title: 'Fleet ID',
      isEdit: false
    },
    log_group_id: {
      title: '日志组ID',
      isEdit: false
    },
    log_stream_id: {
      title: '日志流ID',
      isEdit: false
    },
    log_stream_name: {
      title: '日志流名称',
      isEdit: false
    },
    host_group_id: {
      title: '主机组ID',
      isEdit: false
    },
    host_group_name: {
      title: '主机组名称',
      isEdit: false
    },
    description: {
      title: '描述',
      isEdit: false
    },
    log_config_path: {
      title: '日志配置路径',
      isEdit: false
    }
  }
  const transfer = {
    log_transfer_id: {
      title: '日志转储ID',
      isEdit: false
    },
    dump_interval: {
      title: '转储周期',
      isEdit: false
    },
    obs_bucket_name: {
      title: 'OBS桶名',
      isEdit: false
    },
    obs_transfer_path: {
      title: '转存路径',
      isEdit: false
    }
  }
  let basicData: { [key: string]: { [key: string]: string } } = reactive({ data: {} })
  let transferData: { [key: string]: { [key: string]: string } } = reactive({ data: {} })
  let insertData = ref({} as { [key: string]: string })
  const router = useRouter()
  const route = useRoute()
  const buildInsertResourceConfig = () => {
    router.push({
      name: 'createTransfer',
      params: {
        idData: encodeURIComponent(JSON.stringify(basicData.data))
      }
    })
  }
  const param = reactive({
    project_id: appStore.userStore.project_id,
    access_config_id: `${route.params.id}`,
    log_stream_id: '',
    log_transfer_id: ''
  })
  const deleteTransfer = (id: any) => {
    ElMessageBox.confirm(`确认删除此条数据？ID: ${id}`, '警告', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      param.log_transfer_id = id
      let res = await lts.deleteLtsT(param)
      if (res.status < 300) {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        getLDetails()
      } else {
        ElMessage({
          type: 'info',
          message: '删除失败'
        })
      }
    })
  }
  // let showEdit = ref({
  //   Phone: false,
  //   Email: false
  // } as { [key: string]: boolean })
  // const changeUser = (key: string) => {
  //   for (const k in showEdit.value) {
  //     if (k != key) {
  //       showEdit.value[k] = false
  //     }
  //   }
  //   showEdit.value[key] = true
  // }
  // const closeRow = async (key: string) => {
  //   await getUserInfo()
  //   showEdit.value[key] = false
  // }

  // const onSubmit = async (key: string) => {
  //   let data = {
  //     resconfig: {
  //       Phone: '',
  //       Email: ''
  //     }
  //   }
  //   data.resconfig = JSON.parse(JSON.stringify(basicData.data))
  //   let phone = new RegExp(/^(1[2-9][0-9])\d{8}$/)
  //   let email = new RegExp(/^\w+@\w+(\.\w+)+$/)
  //   if (data.resconfig.Phone) {
  //     let result = phone.test(data.resconfig.Phone)
  //     if (!result) {
  //       ElMessage({
  //         message: '请填写正确的电话号码',
  //         type: 'warning'
  //       })
  //       return false
  //     }
  //   }
  //   if (data.resconfig.Email) {
  //     let result = email.test(data.resconfig.Email)
  //     if (!result) {
  //       ElMessage({
  //         message: '请填写正确的邮箱',
  //         type: 'warning'
  //       })
  //       return false
  //     }
  //     if (!result) return false
  //   }

  //   try {
  //     let res = await userService.changeUser(data)
  //     if (res.status < 300) {
  //       ElMessage({
  //         message: '修改成功',
  //         type: 'success'
  //       })
  //       closeRow(key)
  //       // getResconfig()
  //     }
  //   } catch (err) {
  //     ElMessage.error('创建失败')
  //   }
  // }
  const getLDetails = async () => {
    let res = await lts.getLtsDetails(param)
    basicData.data = res.data
    getLtsTDetails()
  }
  const getLtsTDetails = async () => {
    param.log_stream_id = basicData.data.log_stream_id
    let res = await lts.getLtsTDetails(param)
    if (res.data.log_transfer_list) {
      let resData = res.data.log_transfer_list[0]
      let obj = {
        log_transfer_id: resData.log_transfer_id,
        dump_interval: `${resData.transfer_info.obs_period}${resData.transfer_info.obs_period_unit == 'min' ? '分钟' : '小时'}`,
        obs_bucket_name: resData.transfer_info.obs_bucket_name,
        obs_transfer_path: resData.transfer_info.obs_transfer_path
      }
      transferData.data = obj
    } else {
      transferData.data = {}
    }
    showChange.value = true
  }
  if (route.params.id) {
    getLDetails()
  }
  const backUserInfo = () => {
    router.push({ name: 'ltsList' })
  }
  const changeTransfer = () => {
    Object.keys(transferData.data).length ? deleteTransfer(transferData.data.log_transfer_id) : buildInsertResourceConfig()
  }
</script>
<template>
  <div id="user-info">
    <div class="run-box">
      <div class="state-box">
        <div class="run-label">
          <span class="run-name-box">{{ insertData.name }}</span
          >日志管理信息
          <span class="back" @click="backUserInfo">&nbsp;&lt;&nbsp;返回</span>
        </div>
      </div>
      <div class="change-btn" v-if="showChange">
        <button class="btn new" @click="changeTransfer" v-if="userType >= 5">
          {{ Object.keys(transferData.data).length ? '删除日志转储' : '配置日志转储' }}
        </button>
      </div>
    </div>
    <div class="basic-info">
      <div class="basic-title">日志接入详情</div>
      <div class="basic-box">
        <div class="content-box" v-for="(item, key) in basic" :key="key" :class="key != 'log_config_path' ? '' : 'type-one'">
          <template v-if="key != 'log_config_path'">
            <div class="in-box" v-if="!item.isEdit">
              <div class="content-label">{{ item.title }}</div>
              <div class="content-text">{{ basicData.data[key] || '--' }}</div>
            </div>
            <!-- <div class="in-box" v-else>
              <div class="content-label">{{ item.title }}</div>
              <div class="content-text" v-if="!showEdit[key]">{{ basicData.data[key] || '--' }}</div>
              <div class="content-text" v-else>
                <el-input v-model="basicData.data[key]" />
              </div>
              <div class="edit">
                <div v-if="!showEdit[key]" class="actions-box">
                  <div class="actions-details" @click="changeUser(key)">修改</div>
                </div>
                <div v-else class="actions-box">
                  <div class="actions-details" @click="onSubmit(key)">保存</div>
                  <div class="line"></div>
                  <div class="actions-details" @click="closeRow(key)">取消</div>
                </div>
              </div>
            </div> -->
          </template>
          <template v-else>
            <div class="in-box">
              <div class="content-label">{{ item.title }}</div>
              <div class="one-box">
                <div class="content-text" v-for="(p, i) in basicData.data[key]">
                  <el-icon><component is="FolderOpened" /></el-icon>{{ p || '--' }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="basic-info" v-if="Object.keys(transferData.data).length">
      <div class="basic-title">日志转储详情</div>
      <div class="basic-box">
        <div class="content-box" v-for="(item, key) in transfer" :key="key">
          <div class="in-box" v-if="!item.isEdit">
            <div class="content-label">{{ item.title }}</div>
            <div class="content-text">{{ transferData.data[key] || '--' }}</div>
          </div>
          <!-- <div class="in-box" v-else>
              <div class="content-label">{{ item.title }}</div>
              <div class="content-text" v-if="!showEdit[key]">{{ basicData.data[key] || '--' }}</div>
              <div class="content-text" v-else>
                <el-input v-model="basicData.data[key]" />
              </div>
              <div class="edit">
                <div v-if="!showEdit[key]" class="actions-box">
                  <div class="actions-details" @click="changeUser(key)">修改</div>
                </div>
                <div v-else class="actions-box">
                  <div class="actions-details" @click="onSubmit(key)">保存</div>
                  <div class="line"></div>
                  <div class="actions-details" @click="closeRow(key)">取消</div>
                </div>
              </div>
            </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  #user-info {
    margin-top: 60px;
    color: $text-color;

    .run-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      width: calc(100% - 200px);
      position: absolute;
      top: 50px;
      left: 200px;
      background-color: $blank-color;
      z-index: 10;
      .run-name-box {
        color: $main-color;
      }
      .change-btn {
        margin-right: 20px;
        .btn {
          height: 30px;
          width: 100px;
        }
      }

      .state-box {
        display: flex;
        align-items: center;
        margin-left: 20px;

        .run-label {
          font-size: 16px;
          font-weight: bold;
          margin-right: 16px;
        }
        .el-select {
          width: 100px;
        }
        .fleet {
          width: 160px;
          margin-left: 10px;
        }
      }
    }
    .basic-info {
      background-color: $blank-color;
      min-height: 200px;
      border: 1px solid $border-color;
      padding: 30px;

      .basic-title {
        font-size: 14px;
        font-weight: bold;
      }
      .basic-box {
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        margin-top: 30px;
      }
      .content-box {
        width: 33.3%;
        display: flex;
        margin-bottom: 30px;
        .in-box {
          display: flex;
          min-height: 14px;
          line-height: 14px;
          :deep(.edit) {
            margin-left: 20px;
          }
          :deep(.actions-box) {
            display: flex;
            align-items: center;
            color: $action-color;
            cursor: pointer;
            .line {
              width: 1px;
              height: 14px;
              background-color: $action-color;
              margin: 0 10px;
            }
            .actions-details:hover {
              color: $main-color;
            }
            .actions-delete:hover {
              color: $main-color;
            }
          }
        }
        .content-label {
          width: 130px;
          margin-right: 30px;
          color: $action-color;
        }
        .content-text {
          width: 360px;
          color: $text-color;
          word-break: break-all;
        }
      }
      .type-one {
        width: 100%;
        .in-box {
          align-items: flex-start;
        }
        .content-text {
          width: auto;
          display: flex;
          align-items: center;
        }
        .content-text:not(:first-child) {
          margin-top: 10px;
        }
      }
    }
    .basic-info:not(:first-child) {
      margin-top: 20px;
    }
    .insert-table {
      margin-top: 20px;
    }
  }
</style>
